<template>
  <div>
    <div class="contatine">
      <!-- 车辆列表 -->
      <el-row :gutter="15" class="head">
        <el-form
          ref="elForm"
          :model="queryParams"
          size="mini"
          label-width="100px"
          label-position="left"
        >
          <el-col :span="24">
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="仓库" prop="company">
                  <el-select v-model="queryParams.wId" placeholder="请选择仓库" clearable>
                    <el-option
                      v-for="(item, i) in depotList"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="queryParams.phone"
                    type="number"
                    placeholder="请输入手机号码"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="车辆状态" prop="pStatus">
                  <el-select v-model="queryParams.pStatus" placeholder="请选择车辆状态" clearable>
                    <el-option
                      v-for="(item, i) in pStatusList"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="办案人员" prop="phName" clearable>
                  <el-input
                    v-model="queryParams.phName"
                    placeholder="请输入办案人员名称"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="车辆名称" prop="pName">
                  <el-input
                    v-model="queryParams.pName"
                    placeholder="请输入车辆名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="仓库人员" prop="manager">
                  <el-input
                    v-model="queryParams.manager"
                    placeholder="请输入仓库人员"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="登记时间" prop="time">
                  <el-date-picker
                    style="width: 45%; margin-right: 10%"
                    clearable
                    v-model="queryParams.pCreateTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="开始时间"
                  >
                  </el-date-picker>
                  <el-date-picker
                    style="width: 45%"
                    clearable
                    v-model="queryParams.pEndTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="2" :offset="12">
                <el-form-item size="large">
                  <el-button type="primary" @click="handleQuery">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item size="large">
                  <el-button class="da" type="primary" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="3" :offset="1" v-if="register">
            <el-form-item size="large">
              <el-button class="regist" type="primary" @click="registerDispose">{{
                buttonName
              }}</el-button>
            </el-form-item>
          </el-col> -->
            </el-row>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 显示列表 -->
    <div class="main">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="100" type="index"> </el-table-column>
        <!-- 物品编号 -->
        <el-table-column label="物品编号" width="200" prop="pSerialNum"> </el-table-column>

        <!-- 物品名称 -->
        <el-table-column label="物品名称" prop="pName"> </el-table-column>

        <!-- 物品类型 -->
        <el-table-column label="物品类型" prop="type">
          <template slot-scope="{ row }">
            {{ propertyTypeReplace(row.type) }}
          </template>
        </el-table-column>

        <!-- 数量 -->
        <el-table-column label="数量" width="100" prop="count"> </el-table-column>

        <!-- 物品图片 -->
        <el-table-column label="物品图片" align="center" prop="imgUrl">
          <template slot-scope="scope">
            <image-preview :src="scope.row.imgUrl || ''" :width="50" :height="50"></image-preview>
          </template>
        </el-table-column>

        <!-- 办案人员 -->
        <el-table-column label="办案人员" prop="phName"> </el-table-column>

        <!-- 仓库 -->
        <el-table-column label="仓库" prop="wName" width="150"></el-table-column>

        <!-- 仓库人员 -->
        <el-table-column label="仓库人员" width="90" prop="manager"> </el-table-column>

        <el-table-column label="日期">
          <span slot-scope="scope">
            {{ dateFormat('YYYY-mm-dd HH:MM', scope.row.registryTime) }}
          </span>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="footer">
      <div class="block">
        <pagination
          v-show="total"
          :total="total"
          :limit.sync="pageSize"
          :page.sync="pageNum"
          @pagination="pagination"
        >
        </pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { propertyTypeReplace } from '@/utils/characterConversion.js'
// 车辆接口
import { getCpkList } from '@/api/system/carparks.js'
import request from '@/utils/request.js'

export default {
  dicts: ['financial_property_type'],

  data() {
    return {
      // 仓库列表
      depotList: [],
      // 状态列表
      pStatusList: [
        {
          value: 0,
          label: '没有任何操作'
        },
        {
          value: 1,
          label: '退还'
        },
        {
          value: 2,
          label: '移交'
        },
        {
          value: 3,
          label: '销毁'
        }
      ],
      // 物品类型
      typeList: [
        {
          value: 1,
          label: '普通物品'
        },
        {
          value: 2,
          label: '特殊物品'
        },
        {
          value: 3,
          label: '车辆'
        }
      ],
      // 查询参数
      queryParams: {
        wId: null,
        phone: null,
        pStatus: null,
        phName: null,
        type: null,
        pName: null,
        pCreateTime: null,
        pEndTime: null,
        manager: null
      },
      // 渲染图片
      dialogImageUrl: '',
      // 加载效果
      tableLoading: true,

      // 总页数
      pageNum: 1,
      // 每页显示多少条数据
      pageSize: 10,
      // 数据总条数
      total: 100,

      // 物品列表数据
      tableData: []
    }
  },
  created() {
    // 获取仓库列表数据并处理
    request({
      url: '/system/warehouse/list',
      method: 'get'
    }).then((e) => {
      e.rows.forEach((i) => {
        this.depotList.push({ label: i.name, value: i.id })
      })
    })
    this.handleQuery()
  },
  methods: {
    // 页码发生变化后触发
    pagination(e) {
      // 调用 formdata 组件的方法
      this.pageNum = e.page
      this.pageSize = e.limit
      this.$nextTick(() => {
        this.handleQuery()
      })
    },
    // 重置
    resetQuery() {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.handleQuery()
    },
    // 注册过滤财务类型的显示文字
    propertyTypeReplace,
    // 数据渲染和搜索
    handleQuery() {
      getCpkList({ ...this.queryParams, type: '3' }).then((data) => {
        this.tableLoading = false
        this.tableData = data.rows
        this.total = data.total
        console.log(data)
      })
    },
    // 日期格式化
    dateFormat(fmt, date) {
      let ret = ''
      date = new Date(date)
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  padding: 15px;
}
el-input {
  width: 100px;
  height: 26px;
}

.contatine {
  width: 98%;
  margin: 10px;
  /* background: #f6f3f3; */
  padding: 10px 5px;
}

.top {
  border: 0.5px solid darkgray;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.list_top li {
  list-style: none;
  float: left;
  /* margin-right: 10px; */
  /* padding: 5px 10px 5px  10px; */
  padding: 10px 10px;
  /* border: 1px solid black; */
  top: 50px;
}

/* 财务登记 */

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.main,
.footer {
  width: 98%;
  margin: 10px;
  /* background: #f6f3f3; */
  height: 100%;
  padding: 10px 10px 10px 10px;
}

.operation {
  margin-bottom: 5px;
}

/* 表格 */
.grid {
  text-align: center;
}
</style>
